<%--
  Created by IntelliJ IDEA.
  User: 25443
  Date: 2021/3/11
  Time: 22:51
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
<a href="/book/allBook">书籍查看</a> <a href="../../index.jsp">登录</a>
<%--action="${pageContext.request.contextPath}/user/login"--%>
<form action="" >
    <table >
        <tr id="t1">
            <td>用户名: </td>
            <td><input type="text" id="username" name="username" onblur="userlen(),userR()"></td>
        </tr>
        <tr id="t2">
            <td>密码: </td>
            <td><input type="text" id="password" name="password"></td>
        </tr>
    </table>

    <button id="button">登录</button>
    <span id="status"> </span>
</form>


<form enctype="multipart/form-data" action="/file/sentFile">
    <input type="file" name="file">
    <button>提交</button>
</form>
<script src="${pageContext.request.contextPath}/lib/jquery-3.5.1.js"></script>
<script type="text/javascript">

    function userlen() {
        if ($("#username").val().length>10) {
            if($("#s1")){
                $("#s1").remove();
            }
            $("#t1").append("<span id='s1'>用户名太长</span>")
            $("#s1").css("color","red")
        }
    }
    function userR() {
        $.ajax(
            {
                type:"get",
                url:"${pageContext.request.contextPath}/user/name",
                success:function (data) {
                    if($("#s1")){
                        $("#s1").remove();
                    }
                    $("#t1").append("<span id='s1'>"+data+"</span>")
                    if (data=="账号正确") {
                        $("#s1").css("color","green");
                    }else {
                        $("#s1").css("color","red");
                        alert(JSON.stringify(data))
                    }

                },
                data:{name:$("#username").val()},
                datatype:"json"

            })
    }
    $(function () {
        $("#button").click(function (event) {

            $.ajax(
                {
                    type:"get",
                    url:"${pageContext.request.contextPath}/user/login",
                    success:function (data) {

                        if (data.toString().trim()=="账号或密码错误!"){
                            $("#status").html(data)
                            $("#status").css("color","red")
                        }else {
                            window.location.href="${pageContext.request.contextPath}/book/allBook";
                        }

                    },
                    data:{username:$("#username").val()},
                    datatype:"json"

                })
            return false;
        })
    })
</script>
</body>
</html>
